<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>表单</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script type="text/javascript" src="../../assets/lib/iframe-resizer-3.6.3/iframeResizer.contentWindow.min.js"></script>
  <link href="../../assets/css/font-awesome-4.7.0.min.css" rel="stylesheet" type="text/css" />
  <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="../../assets/lib/vue-multiselect-2.1.0/style.min.css" rel="stylesheet" type="text/css" />
</head>

<body class="p-3">
  <div id="form_list">
    <template v-if="pageType == 'loading'">
      <div class="text-center" style="margin-top: 100px">
        <img class="mt-3" src="../../assets/images/loading.gif" />
        <p class="lead mt-3 text-nowrap">载入中，请稍后...</p>
      </div>
    </template>
    <template v-else>
      <div class="card-box">
        <div class="table-responsive mt-3">
          <table class="table tablesaw table-hover m-0">
            <thead>
              <tr>
                <th v-for="attributeName in allAttributeNames" v-if="listAttributeNames.indexOf(attributeName) !== -1">
                  {{ getAttributeText(attributeName) }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in items">
                <td v-for="attributeName in allAttributeNames" :key="attributeName" v-if="listAttributeNames.indexOf(attributeName) !== -1">
                  
                    <img v-if="getAttributeType(attributeName) === 'Image'" :src="getAttributeValue(item, attributeName)" style="max-height: 100px; max-width: 100px; cursor: pointer;" v-on:click="largeImage(item, attributeName)">
                    <div v-else>
                        {{ getAttributeValue(item, attributeName) }}
                    </div>

                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <hr />
        <div class="row" v-if="pages > 1">
          <div class="col-10">
            <ul class="pagination pagination-sm float-left">
              <li class="page-item" :class="{disabled : page === 1}">
                <a class="page-link" @click="loadFirstPage" :class="{'bg-light' : page === 1}" href="javascript:;">首 页</a>
              </li>
              <li class="page-item" :class="{disabled : page === 1}">
                <a class="page-link" @click="loadPrevPage" :class="{'bg-light' : page === 1}" href="javascript:;">上一页</a>
              </li>
              <li class="page-item" :class="{disabled : page === pages}">
                <a class="page-link" @click="loadNextPage" :class="{'bg-light' : page === pages}" href="javascript:;">下一页</a>
              </li>
              <li class="page-item" :class="{disabled : page === pages}">
                <a class="page-link" @click="loadLastPage" :class="{'bg-light' : page === pages}" href="javascript:;">末
                  页</a>
              </li>
            </ul>
          </div>
          <div class="col-2">
            <multiselect @select="onPageSelect" v-model="page" placeholder="Select one" :options="pageOptions"
              :searchable="false" :show-labels="false"></multiselect>
          </div>
        </div>
      </div>
    </template>
  </div>
</body>

</html>
<script src="../../assets/lib/vue-2.5.16.min.js" type="text/javascript"></script>
<script src="../../assets/lib/lodash-4.17.10.min.js" type="text/javascript"></script>
<script src="../../assets/lib/es6-promise.auto.min.js" type="text/javascript"></script>
<script src="../../assets/lib/axios-0.18.0.min.js" type="text/javascript"></script>
<script src="../../assets/lib/vue-multiselect-2.1.0/script.min.js" type="text/javascript"></script>
<script src="../../assets/lib/sweetalert2-7.28.4.all.min.js" type="text/javascript"></script>
<script src="../../assets/js/list.js" type="text/javascript"></script>